<template>
  <div class="aqi-overview">
    <div class="aqi-overview"></div>
    <div class="aqi-overview-detail">
      <h3 class="aqi-overview-detail__section-title">
        <font style="vertical-align: inherit"
        >概述</font
        >
      </h3>
      <h2 class="aqi-overview-detail__title">
        <font style="vertical-align: inherit"
        ><font style="vertical-align: inherit"
        >{{ cityName }}现在的空气质量指数（AQI）是多少？</font
        ></font
        >
      </h2>
      <!--描述-->
      <div class="table-wrapper">
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item label="空气污染程度">{{
              airTypeId
            }}
          </el-descriptions-item>
          <el-descriptions-item label="空气质量指数">{{
              aqi
            }}
          </el-descriptions-item>
          <el-descriptions-item label="主要污染物" :span="2">{{
              maxPollutants
            }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 污染物 -->
      <table class="aqi-overview-detail__other-pollution-table" title="">
        <thead>
        <tr style="height: 36px">
          <th
              colspan="2"
              style="
                font-size: 12px;
                font-weight: 400;
                text-align: left;
                color: #414141;
                line-height: 1.5;
                padding: 6px;
              "
          >
            污染物
          </th>
          <th
              style="
                text-align: right;
                font-size: 12px;
                font-weight: 400;
                color: #414141;
                line-height: 1.5;
                padding: 6px;
                border-collapse: collapse;
              "
          >
            专注
          </th>
        </tr>
        </thead>
        <tbody>
        <tr style="background-color: #f9fafb; height: 36px">
          <td class="td1">
            PM2.5
          </td>
          <td class="td2">
            <el-progress
                :percentage="percentagePM"
                :color="customColorMethod"
            ></el-progress>
          </td>
          <td class="td3">
              <span
                  mattooltipposition="below"
                  mattooltipclass="title-tooltip"
                  class="mat-tooltip-trigger pollutant-concentration-value"
              ><font style="vertical-align: inherit"
              >{{ pollutant.pm25 }}</font
              ></span
              ><!----><span class="unit"
          ><font style="vertical-align: inherit"
          ><font style="vertical-align: inherit"
          >微克/立方米</font
          ></font
          ></span
          >
          </td>
        </tr>
        <tr style="background-color: #fff; height: 36px">
          <td class="td1">
            一氧化碳
          </td>
          <td class="td2">
            <el-progress
                :percentage="percentageCO"
                :color="customColorMethod"
            ></el-progress>
          </td>
          <td class="td3">
              <span
                  mattooltipposition="below"
                  mattooltipclass="title-tooltip"
                  class="mat-tooltip-trigger pollutant-concentration-value"
              ><font style="vertical-align: inherit"
              >{{ pollutant.co }}</font
              ></span
              ><!----><span class="unit"
          ><font style="vertical-align: inherit"
          ><font style="vertical-align: inherit"
          >微克/立方米</font
          ></font
          ></span
          >
          </td>
        </tr>
        <tr style="background-color: #f9fafb; height: 36px">
          <td class="td1">
            二氧化硫
          </td>
          <td class="td2">
            <el-progress
                :percentage="percentageSO"
                :color="customColorMethod"
            ></el-progress>
          </td>
          <td class="td3">
              <span
                  mattooltipposition="below"
                  mattooltipclass="title-tooltip"
                  class="mat-tooltip-trigger pollutant-concentration-value"
              ><font style="vertical-align: inherit"
              >{{ pollutant.so2 }}</font
              ></span
              ><!----><span class="unit"
          ><font style="vertical-align: inherit"
          ><font style="vertical-align: inherit"
          >微克/立方米</font
          ></font
          ></span
          >
          </td>
        </tr>
       
        </tbody>
      </table>
      
      <!--建议-->
      <div class="recommendation-wrapper">
        <div class="recommendation">
          <h3 class="recommendation__section-title">
            健康建议
          </h3>
          <h2 class="recommendation__title">
            {{ cityName }}空气污染，如何做好防护？
          </h2>
         
          <div class="recommendation__detail">
            <table title="空气污染，如何做好防护？" style="width: 100%">
              <tbody
                  style="
                  display: flex;
                  flex-direction: row;
                  width: 100%;
                  justify-content: space-between;
                  flex-wrap: wrap;
                  margin: -12px 0;
                "
              >
              <tr>
                <!-- <td>
                  <img
                    src="assets/recommendations/ic-health-mask-orange.svg"
                    alt="IQAir 面罩图标"
                  />
                </td> -->
                <td class="td2">
                  <font style="vertical-align: inherit"
                  ><font style="vertical-align: inherit"
                  >{{ propose }}</font
                  ></font
                  ><br/>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  data() {
    return {
      cityName: "",
      airTypeId: "",
      aqi: "",
      maxPollutants: "",
      pollutant: {
        co: "",
        so2: "",
        pm25: "",
      },
      propose: '',

      percentagePM: 20,
      percentageCO: 20,
      percentageSO: 20

    };
  },
  created() {
    this.getCityInfo();
    this.getPercentage();
  },
  methods: {


    async getCityDetail() {
      await this.$store.dispatch("detail/getIdCityList", this.$route.params.cityId);
      // eslint-disable-next-line no-undef
      //sleep(2000);
      this.detailCityInfo = this.$store.state.detail.detailCityInfo
    },

    // 获取百分比
    getPercentage() {
      console.log(Number(this.pollutant.pm25))
      this.percentagePM = Number(this.pollutant.pm25)
      this.percentageCO = Number(this.pollutant.co)
      this.percentageSO = Number(this.pollutant.so2)
    },
    //获取城市详细信息
    getCityInfo() {
      this.cityName = this.detailCityInfo[0].cityName;
      this.airTypeId = this.detailCityInfo[0].airTypeId;
      this.aqi = this.detailCityInfo[0].aqi;
      this.maxPollutants = this.detailCityInfo[0].maxPollutants;
      // let main = [
      //   [
      //     this.detailCityInfo[0].co,
      //     this.detailCityInfo[0].so2,
      //     this.detailCityInfo[0].pm25,
      //   ],
      // ];
      this.pollutant.co = this.detailCityInfo[0].co,
          this.pollutant.pm25 = this.detailCityInfo[0].pm25,
          this.pollutant.so2 = this.detailCityInfo[0].so2,
          this.propose = this.detailCityInfo[0].propose
      // main.sort((a, b) => Number(a) - Number(b));
      // console.log("main :>> ", main);
      // this.main = main[0];
      // console.log(this.detailCityInfo);
    },

    //进度条颜色
    customColorMethod(percentage) {
      if (percentage < 30) {
        return "#67c23a";
      } else if (percentage < 70) {
        return "#FF7E00";
      } else {
        return "#7E0123";
      }
    },
  },
  computed: {
    //某个id城市信息
    ...mapState("detail", ["detailCityInfo"]),
  },
};
</script>

<style lang="less" scoped>
.aqi-overview {
  margin-bottom: 24px;
  border-radius: 4px;
  box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);

  .aqi-overview-detail {
    padding: 24px;

    .aqi-overview-detail__section-title {
      margin-bottom: 8px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.9px;
      text-transform: uppercase;
      color: #499fbc;
    }

    .aqi-overview-detail__title {
      font-size: 20px;
      line-height: 1.4;
      color: #414141;
      font-weight: 500;
      letter-spacing: normal;
      margin-bottom: 32px;
      font-family: Arial, Helvetica, sans-serif;
    }

    .table-wrapper {
      max-width: 100%;
      overflow-x: auto;
      margin-bottom: 24px;
    }

    .aqi-overview-detail__other-pollution-table {
      width: 100%;

      .td1 {
        width: 132px;
        padding-left: 12px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #414141;
        line-height: 1.5;
        padding: 6px;
      }

      .td2 {
        padding-left: 25px;
        padding-right: 26px;
        font-size: 16px;
        font-weight: 400;
        text-align: left;
        color: #414141;
        line-height: 1.5;
        padding: 6px;
        border-collapse: collapse;
      }

      .td3 {
        text-align: right;
        width: 190px;
        font-size: 16px;
        font-weight: 400;
        color: #414141;
        line-height: 1.5;
        padding: 6px;
        border-collapse: collapse;
      }
    }

    .recommendation-wrapper {
      margin-top: 48px;

      .recommendation__section-title {
        margin-bottom: 8px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
        line-height: 1.5;
        letter-spacing: 0.9px;
        text-transform: uppercase;
        color: #499fbc;
      }

      .recommendation__title {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 20px;
        line-height: 1.4;
        color: #414141;
        font-weight: 500;
        letter-spacing: normal;
        margin-bottom: 32px;
      }

      tr {
        height: 48px;
        width: 48%;
        margin: 12px 0;

        .td2 {
          font-size: 14px;
          line-height: 1.43;
          color: #414141;
        }

        a {
          text-transform: uppercase;
          font-size: 12px;
          line-height: 14px;
          color: #49739a;
        }
      }
    }
  }
}
</style>